<template>
  <div>
    <!-- 表头切换 -->
    <div class="mytab">
      <div class="gap"></div>
      <div
        :class="tabActive == 2 ? 'item active' : 'item'"
        style="cursor: pointer"
        @click="setTabActive(2)"
      >
        流程设定
      </div>
      <div class="gap"></div>
      <div
        :class="tabActive == 3 ? 'item active' : 'item'"
        style="cursor: pointer"
        @click="setTabActive(3)"
      >
        模块发布
      </div>
    </div>

    <!-- 表单设计 -->
    <div v-show="tabActive == 1">
      <design ref="design" :is-dev="isDev"/>
    </div>
    <!-- 流程设计 -->
    <div v-show="tabActive == 2">
      <process ref="process" :procDefKey="procDefKey"  @resetKey="resetKey"/>
    </div>
    <!-- 模块发布 -->
    <div v-show="tabActive == 3">
      <publish ref="publish"/>
    </div>
  </div>
</template>


<script>
import design from "@/views/modules/design/design";
import process from "@/views/modules/process";
import publish from "./publish";
export default {
  components: { design, process, publish },
  data() {
    return {
      tabActive: 2,
      isDev: false,
      form: {
        id: "",
      },
      procDefKey: "",
    };
  },
  methods: {
    resetKey(value) {
      this.$refs["publish"].form.modulesKey = value
    },
    setTabActive(index) {
      this.tabActive = index;
      this.$refs["publish"].form.fieldJson =this.$refs["design"].saveTempJson();
      //这边要对formList进行解析
      let fomrList = JSON.parse(this.$refs["design"].saveTempJson());
      for (let index in fomrList.list) {
        if (fomrList.list[index].type == "grid") {
          let gridData = [];
          for (let itemson of fomrList.list[index].columns) {
            gridData = [...gridData, ...itemson.list];
          }
          for (let datason of gridData) {
            fomrList.list.push(datason);
          }

        }
      }
      for (let index in fomrList.list) {
        if (fomrList.list[index].type == "grid") {
         //移除grid
          fomrList.list.splice(index, 1);
        }
      }

      this.$refs["process"].formList = fomrList;
      this.$refs["process"].saveTempXml().then((res) => {
        this.$refs["publish"].form.modulesXml = res;
      });
      this.$refs["process"].saveTempSvg().then((res) => {
        this.$refs["publish"].form.modulesSvg = res;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //初始化数据
    initData() {
      if (this.form.id) {
        //将这个数据向三个子页面里面扩散
        this.$refs["publish"].form = this.form;
        this.$refs["publish"].originForm = JSON.parse(JSON.stringify(this.form));
        this.$refs["design"].setJSON(JSON.parse(this.form.fieldJson));
        this.$refs["process"].createNewDiagram(this.form.modulesXml);
        this.procDefKey =  this.form.modulesKey;
        console.log(this.procDefKey)

      }
    },

    //关闭窗口，刷新数据
    closePage() {
      this.$emit("closeAddPage");
    },
  },
};
</script>
<style lang="scss" scoped>
.mytab {
  display: flex;
  justify-content: center;
  font-size: 16px;
  margin-top: -25px;
  .item {
    border-bottom: none;
    padding-bottom: 10px;
    margin: 10px;
  }
  .active {
    color: #207cf2;
    border-bottom: 3px solid #207cf2;
  }
  .gap {
    width: 35px;
  }
}
</style>
